import 'package:flutter/material.dart';
import 'package:full_display/common/qxp_color.dart';
import 'package:full_display/page/medium/cloud_provider.dart';
import 'package:full_display/page/medium/cloud_widgets/product_widget.dart';
import 'package:full_display/unit/screen/screen_utility.dart';
import 'package:provider/provider.dart';

class CloudMediaWidget extends StatelessWidget {
  const CloudMediaWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider(
          create: (_) => CloudProvider(),
        )
      ],
      child: const LocalMediaPage(),
    );
  }
}

class LocalMediaPage extends StatefulWidget {
  const LocalMediaPage({Key? key}) : super(key: key);

  @override
  State<LocalMediaPage> createState() => _LocalMediaPageState();
}

class _LocalMediaPageState extends State<LocalMediaPage>
    with SingleTickerProviderStateMixin {
  var _mediaProvider = CloudProvider();

  late TabController _tabController;

  int currentIndex = 0;

  @override
  void initState() {
    _tabController =
        TabController(length: _mediaProvider.titleList.length, vsync: this);
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _mediaProvider = context.watch<CloudProvider>();

    return Column(
      children: [
        Container(
          margin: EdgeInsets.only(top: 24.0.H, left: 20.0.W, right: 20.0.W),
          child: TabBar(
            indicatorColor: ColorPlate.blue,
            indicatorWeight: 3.0.H,
            indicatorSize: TabBarIndicatorSize.label,
            isScrollable: true,
            indicator: null,
            controller: _tabController,
            labelStyle:  TextStyle(fontSize: 16.0.SP,color: ColorPlate.white),
            unselectedLabelStyle: TextStyle(fontSize: 16.0.SP,color: ColorPlate.white),
            tabs: _mediaProvider.titleList
                .map((e) => Container(
                      height: 24.0.H,
                      child: Tab(text: e),
                    ))
                .toList(),
            onTap: (index){
              setState(() {
                currentIndex = index;
              });
            },
          ),
        ),
        Expanded(
            child: IndexedStack(
          index: currentIndex,
          children: [
            ProductWidget(dataList: _mediaProvider.productList,),
            ProductWidget(dataList: _mediaProvider.logoList,),
            ProductWidget(dataList: _mediaProvider.captureList,),
            ProductWidget(dataList: _mediaProvider.adList,),
            ProductWidget(dataList: _mediaProvider.coolList,),
            ProductWidget(dataList: _mediaProvider.persionList,),
          ],
        ))
      ],
    );
  }
}
/**
 * Container(
    margin: EdgeInsets.only(top: 24.0.H),
    child: GridView.builder(
    padding: EdgeInsets.only(
    left: 20.0.W,
    right: 20.0.W,
    ),
    itemCount: /*_mediaProvider.mediaList.length*/ 100,
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    childAspectRatio: 104 / 130,
    crossAxisCount: 3,
    crossAxisSpacing: 12.0.W,
    mainAxisSpacing: 12.0.H),
    itemBuilder: (context, index) {
    return ItemMedia();
    },
    ))
 */
